<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
    }
    .login-container {
      background: white;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
      width: 350px;
      text-align: center;
    }
    .input-group {
      margin-bottom: 25px;
      position: relative;
    }
    input {
      width: 100%;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 16px;
      transition: border-color 0.3s;
    }
    input:focus {
      border-color: #2575fc;
      outline: none;
      box-shadow: 0 0 5px rgba(37, 117, 252, 0.5);
    }
    .btn {
      background: #2575fc;
      color: white;
      border: none;
      padding: 15px 20px;
      width: 100%;
      border-radius: 5px;
      font-size: 18px;
      cursor: pointer;
      transition: background 0.3s;
      margin-top: 10px;
    }
    .btn:hover {
      background: #1a65e0;
    }
    .error {
      color: #ff4d4f;
      font-size: 14px;
      margin-top: 5px;
      text-align: left;
    }
  </style>
</head>
<body>
<div id="app" class="login-container">
  <h2>用户登录</h2>
  <form @submit.prevent="login">
    <div class="input-group">
      <input type="text" v-model="username" placeholder="请输入用户名" required>
      <div v-if="errors.username" class="error">{{ errors.username }}</div>
    </div>
    <div class="input-group">
      <input type="password" v-model="password" placeholder="请输入密码" required>
      <div v-if="errors.password" class="error">{{ errors.password }}</div>
    </div>
    <button type="submit" class="btn">登录</button>
  </form>
  <div v-if="loginMessage" class="error">{{ loginMessage }}</div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      password: '',
      errors: {
        username: '',
        password: ''
      },
      loginMessage: ''
    },
    methods: {
      validate() {
        // 重置错误信息
        this.errors = {
          username: '',
          password: ''
        };

        let valid = true;

        // 验证用户名
        if (!this.username) {
          this.errors.username = '请输入用户名';
          valid = false;
        } else if (this.username.length < 3) {
          this.errors.username = '用户名长度至少3个字符';
          valid = false;
        }

        // 验证密码
        if (!this.password) {
          this.errors.password = '请输入密码';
          valid = false;
        } else if (this.password.length < 6) {
          this.errors.password = '密码长度至少6个字符';
          valid = false;
        }

        return valid;
      },
      login() {
        // 验证表单
        if (!this.validate()) {
          return;
        }

        // 模拟登录逻辑
        if (this.username === 'admin' && this.password === '123456') {
          this.loginMessage = '登录成功！';
          // 实际开发中这里会跳转到首页
        } else {
          this.loginMessage = '用户名或密码错误';
        }
      }
    },
    mounted(){
      axios
              .get('/employee/getName')
              .then(response => (this.username = response.data))
              .catch(function (error) { // 请求失败处理
                console.log(error);
              });
    }
  });
</script>
</body>
</html>